import { Toast } from 'antd-mobile'
import { useEffect, useState } from 'react'
import { RankList } from '../../../api/active'
import appSdk from '../../../utils/app_sdk'
import './index.less'

/**
 * 爱如期而至
 * 心动榜单
 */
// {
// 	"user1": {
// 			"id": 4,
// 			"nickname": "钢结构",
// 			"headimgurl": "https://qmgz-1251221317.cos.ap-guangzhou.myqcloud.com/1676890008865"
// 	},
// 	"user2": {
// 			"id": 1111094,
// 			"nickname": "123123",
// 			"headimgurl": "https://qmgz-1251221317.cos.ap-guangzhou.myqcloud.com/1677037138319.jpg"
// 	},
// 	"score": 321320,
// 	"rank": 1,
// 	"is_rise": 0
// }
const status = {
  0: 'none',
  1: 'up',
  '-1': 'down'
}
export default function ActiveRank() {
  const [rankList, setRankList] = useState([])
  const [period, setPeriod] = useState([[]])
  const [topUser, setTopUser] = useState({ user1: {}, user2: {} })
  const [mineData, setMineData] = useState()

  useEffect(() => {
    document.title = '爱如期而至'
    RankList().then((res) => {
      console.log(res)
      if (Array.isArray(res.data?.rank)) {
        setTopUser(res.data.rank[0])
        setRankList(res.data?.rank.slice(1))
        setPeriod(Object.values(res.data.period))
        if (!Array.isArray(res.data.selfRank)) {
          setMineData(res.data.selfRank)
        }
        // console.log(res.data.period);
      } else {
        Toast.show({
          content: '数据异常'
        })
      }
    })
    // document.getElementsByClassName('App')[0].style
    document.getElementsByClassName('App')[0].style.paddingTop = 0
    // () => {
    //     document.getElementsByClassName('App')[0].style.paddingTop = 0
    // }
  }, [])

  const [active, setActive] = useState(1)

  const toMessage = () => {
    appSdk('jumpToMain', 3)
  }

  return (
    <div className="active_rank_wrap">
      <div className="active_time">
        {period[0][0] || ''}-{period[0][1] || ''}
      </div>
      <div className="top_wrap">
        <div className="top_user">
          <div className="icon"></div>
          <div className="avatar">
            <img src={topUser.user1?.headimgurl} alt="" />
          </div>
          <div className="name">{topUser.user1?.nickname || ''}</div>
        </div>
        <div className="top_user">
          <div className="icon"></div>
          <div className="avatar">
            <img src={topUser.user2?.headimgurl} alt="" />
          </div>
          <div className="name">{topUser.user2?.nickname || ''}</div>
        </div>
      </div>
      <div className="top_points">&nbsp;&nbsp; {topUser?.score || 0}</div>
      <div className="love_icon"></div>
      <div className="button_menu">
        <div className={`btn ${active === 0 ? 'left_active' : 'left_un'}`} onClick={() => setActive(0)}>
          <div className="txt_icon"></div>
        </div>
        <div className={`btn ${active === 1 ? 'right_active' : 'right_un'}`} onClick={() => setActive(1)}>
          <div className="txt_icon"></div>
        </div>
      </div>
      <div className={`active_content_wrap ${active === 1 ? 'right' : 'left'}`}>
        <div className="left_content box">
          <div className="tit"></div>
        </div>
        <div className="left_content box">
          <div className="tit"></div>
        </div>
        <div className="left_content box">
          <div className="tit"></div>
        </div>

        <div className="right_content box">
          <div className="tit"></div>
          <div className="mask"></div>
          <div className="board_wrap">
            <div className="cont">
              <div className="rank_list">
                {rankList?.map((item) => (
                  <div className="rank_item" key={item.rank}>
                    <div className="rank_num">{item?.rank}</div>
                    <div className="avatars">
                      <div className="avat">
                        <img src={item.user1.headimgurl} alt="" />
                      </div>
                      <div className="avat">
                        <img src={item.user2.headimgurl} alt="" />
                      </div>
                    </div>
                    <div className="info">
                      <div className="nickanmes">
                        <span>{item.user1.nickname}</span>&<span>{item.user2.nickname}</span>
                      </div>
                      <div className="points">{item?.score || 0}</div>
                    </div>
                    <div className={`status ${status[item?.is_rise]}`}></div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        <div className="active_tips">本活动最终解释权归{window.baseConfig.package_name}所有</div>
      </div>
      {mineData ? (
        <div className="my_cp">
          <div className="rank_item">
            <div className="rank_num">{mineData?.rank}</div>
            <div className="avatars">
              <div className="avat">
                <img src={mineData.user1.headimgurl} alt="" />
              </div>
              <div className="avat">
                <img src={mineData.user2.headimgurl} alt="" />
              </div>
            </div>
            <div className="info">
              <div className="nickanmes">
                <span>{mineData.user1.nickname}</span>&<span>{mineData.user2.nickname}</span>
              </div>
              <div className="points">{mineData?.score || 0}</div>
            </div>
            <div className={`status ${status[mineData?.is_rise]}`}></div>
          </div>
        </div>
      ) : (
        <div className="to_group" onClick={toMessage}></div>
      )}
    </div>
  )
}
